import { notification, Button } from 'antd'
import { limit } from '@configs/limit'
import { ClockCircleTwoTone } from '@ant-design/icons'

export const openCountNotification = (count) => {
  const Notice = () => {
    return (
      <>
        <h1
          style={{ textAlign: 'center', fontSize: 20, fontWeight: 700, color: '#333', marginTop: 60 }}
        >{`今日体验次数${count}/${limit.maxCount}`}</h1>
        <p
          style={{ fontSize: 16, fontWeight: 400, marginTop: 10, color: 'rgba(0,0,0,.7)', padding: '0 20px' }}
        >{`由于服务访问限制，您每天可以获得${limit.maxCount}次转换服务，若需增加转换服务次数，请联系我们，我们将为您开通。`}</p>
        <Button type='primary' style={{ width: 150, height: 30, margin: '40px 120px', borderRadius: 2 }}>
          <a href='mailto:yntx_fund@163.com?subject=与你同行在线转换平台联系'>立即联系</a>
        </Button>
      </>
    )
  }

  const NoticeTitle = () => {
    return (
      <div style={{ backgroundColor: '#F6742D', height: 130 }}>
        <ClockCircleTwoTone
          twoToneColor={'#F6742D'}
          style={{
            fontSize: 100,
            position: 'absolute',
            alignContent: 'center',
            left: 0,
            right: 0,
            top: 50,
            bottom: 0,
            margin: 'auto',
          }}
        />
      </div>
    )
  }

  notification.open({
    className: 'count-notice',
    message: (
      // <img
      //   src=''
      //   alt='noticication'
      //   class='notice-img'
      //   style={{ width: '100%' }}
      // ></img>
      <NoticeTitle />
    ),
    description: <Notice />,
    placement: 'bottomRight',
    style: {
      borderRadius: 6,
      padding: 0,
    },
    duration: null,
    onClick: () => {},
  })
}
